<template>
    <div id="app">
        <p v-if="show">Show </p>
        <p><a :href="url">链接</a></p>
        <img :src="imgURL">
        <p>姓名:{{ fullname }}</p>
        <p><button @click="handleClose">Hidden</button></p>
        <p>点击次数:{{ counter }}</p>
        <p><button @click="handleAdd()">+1</button></p>
        <p><button @click="handleAdd(10)">+10</button></p>
        <p>
            <el-select v-model="selected">
                <el-option v-for="option in options" :value="option.value" :key="option">
                    {{ option.text}}</el-option>
            </el-select>
        </p>
        <p>选项是：{{ selected }}</p>
    </div>
</template>

<script>
    export default {
        name: "Fst05",
        data(){
            return{
                counter:0,
                show:true,
                url:'http://www.baidu.com',
                imgURL:'https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png',
                firstName:'Jack',
                lastName:'Jones',
                selected:'',
                options:[{text:'HTML',value:'html'},
                    {text:'Javascript',value:'js'},
                    {text:'CSS',value:'css'}]
            }
        },
        methods:{
            handleClose(){
                this.show=false;
            },
            handleAdd(count){
                count = count || 1;
                this.counter += count;
            }
        },
        computed:{
            fullname:{
                // getter 用于读取
                get(){
                    return this.firstName+' '+this.lastName;
                }
                // //setter 写入时触发
                // set(newValue){
                //     let names =newValue.split(' ');
                //     this.firstName = names[0];
                //     this.lastName = names[names.length-1];
                // }
            }
        }
    }
</script>

<style scoped>

</style>